<template>
	<!-- movable-area与movable-view需要分别增加pointer-events: none和pointer-events: auto
	用于组件事件穿透与恢复组件事件（此处不加会导致引用该组件的父组件无法使用事件） -->
	<view>
		<view class="movable-area">
			<view class="movable-view" direction="all">
				<view class="movablebox " style="">
					<view class="menuItem" v-if="menuFlag" style=""
						style="display: flex;align-items: center;padding-left: 60rpx;box-sizing: border-box;">
						<view class="title" @click="leftClick">
							<uni-icons type="wallet" size="26" color="#2174FF"></uni-icons>
							<text style="color:#4B4B4B;font-size: 28rpx;margin-top: 10rpx;	color: #fff;">批量制作对账单</text>
						</view>
						<!-- <view class="title" style="margin-right: 90rpx;margin-left: 50rpx;" @click="rightClick">
							<uni-icons type="mail-open" size="26" color="#2174FF"></uni-icons>
							<text style="color:#4B4B4B;font-size: 28rpx;margin-top: 10rpx;	color: #fff;">批量发送</text>
						</view> -->
					</view>
					<view class="menu" @click="duizhangClick" :class="[menuFlag==true?'active':'unactive']">
						批量
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mask: false,
				menuFlag: false,
				x: 920, //x坐标
				y: 520, //y坐标
			}
		},
		methods: {
			duizhangClick() {
				this.menuFlag = !this.menuFlag
				console.log('对账click', this.menuFlag)
			},
			leftClick() {
				this.$emit('leftClick')
			},
			rightClick() {
				this.$emit('rightClick')
			}
		}
	}
</script>

<style lang="scss">
	.active.menuItem {
		display: block;

	}

	.active.menuItem.menuItem2 {
		// right: -120rpx  !important;
	}



	$all_width: 96rpx;
	$all_height: 96rpx;

	.movable-area {

		// 兼容H5和APP
		/* #ifdef H5 */
		// height: calc(100vh - 140px);
		// margin-top: 100rpx;
		/* #endif */
		/* #ifdef APP */
		// margin-top: 80rpx;
		// height: calc(100vh - 40px);
		/* #endif */
		// width: 99%;
		bottom: 100rpx;
		right: 0;
		position: fixed;
		// z-index: 9999;
		// pointer-events: none; //此处要加，鼠标事件可以渗透

		.movable-view {
			padding-right: 80rpx;
			padding-bottom: 80rpx;
			width: $all_width;
			height: $all_height;
			pointer-events: auto; //恢复鼠标事件

			image {
				width: $all_width;
				height: $all_height;
			}

			.movablebox {
				background-color: #2174FF;
				position: absolute;
				color: #fff;
				border-radius: 50%;
				width: 90rpx;
				height: 90rpx;
				padding: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.menu.active {
					transform: rotate(-45deg);
					transition: .35s ease .1s;
				}

				.menu.unactive {
					transform: rotate(0deg);
					transition: .35s ease .1s;
				}

				.menuItem {
					border: 1px solid #ccc;
					background: linear-gradient(to right, #8EC1FC, #DB8EFC);
					z-index: -100;
					position: absolute;
					width: 400rpx;
					right: 1rpx;
					height: 123rpx;
					border-top-right-radius: 60rpx;
					border-bottom-right-radius: 60rpx;
					border-top-left-radius: 70rpx;
					border-bottom-left-radius: 70rpx;

					// display: flex;
					// display: none;
					.title {
						position: relative;
						color: #000;
						display: flex;
						flex-direction: column;
						align-items: center;
					}
				}

				.menuItem1 {
					transition: .35s ease;
				}

				.menuItem2 {
					transition: .35s ease .1s;
				}

				.menuItem3 {
					transition: .35s ease .2s;
				}
			}
		}
	}
</style>